<template>
  <div>
    <div class="bustopNav">
      <div>{{ modifyShow ? '请确定预留信息' : '设置手机号' }}</div>
    </div>
    <div v-show="sureMessage">
      <div class="reMessage">
        <div class="messages">
          <span class="leftName" style="color:#808080">姓名</span>
          <span class="cus_input" style="color:#333333;font-weight:bold">{{ customerName }}</span>
        </div>
        <div class="messages">
          <span class="leftName" style="color:#808080">手机号</span>
          <span class="cus_input" style="color:#333333;font-weight:bold">
            <!-- <img
              @click="modify()"
              src="~@/assets/images/regmodify.png"
              style="width:12px;margin-right: 13px;vertical-align: middle"
              alt=""
            /> -->
            {{ customerPhone }}
          </span>
        </div>
      </div>
      <div class="sureButton">
        <button @click="nextRegister()" class="sureBut">
          继续预约
        </button>
      </div>
    </div>
    <div v-show="modifyPhone">
      <div class="reMessage">
        <div class="messages" style="background-color:#fff;margin-top: 40px;">
          <span class="leftName">手机号</span>
          <input type="text" class="cus_input" v-model="customerPhone" maxlength="11" />
        </div>
      </div>
      <div class="sureButton">
        <button @click="sureModify()" class="sureBut">
          确定
        </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import { Toast } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
Vue.use(Toast);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { Header },
})
export default class Register extends Vue {
  departId: any = ''; // 网点部门id
  openId: any = '';
  address: any = '';
  fullname: any = '';
  customerName: any = ''; // 客户姓名
  customerPhone: any = ''; // 客户手机号
  sureMessage: any = true;
  modifyPhone: any = false;
  modifyShow: any = true;
  ischecked: any = true;
  latitude:any = '';
  longitude:any = '';
  mounted() {
    this.departId = this.$route.query.departId; // 网点部门id
    this.openId = this.$route.query.openId;
    this.address = this.$route.query.address;
    this.fullname = this.$route.query.fullname;
    this.longitude = this.$route.query.longitude; 
    this.latitude= this.$route.query.latitude;
    this.isOneLoad();
  }
  //是否是第一次进入
  isOneLoad() {
    // Toast.loading({
    //   duration: 0,
    //   message: '加载中...',
    //   forbidClick: true,
    // });
    var _this = this;
    cloudApi
      .isOneLoad({
        openId: this.openId,
      })
      .then(function(res: any) {
        // Toast.clear();
        if (res.data) {
          if(res.data.code == '9999'){//是第一次进入

          }else {
            _this.customerName = res.data.name;
            _this.customerPhone = res.data.phone;
          }
        }
      });
  }
  // 同意协议
  sureClick() {
    this.ischecked = this.ischecked ? false : true;
  }
  //修改手机号
  modify() {
    this.sureMessage = false;
    this.modifyShow = false;
    this.modifyPhone = true;
  }
  //确定修改手机号
  sureModify() {
    this.sureMessage = true;
    this.modifyShow = true;
    this.modifyPhone = false;
  }
  //继续预约
  nextRegister() {
    this.$router.push({
      path: 'businessList',
      query: {
        departId: this.departId,
        customerName: this.customerName,
        customerPhone: this.customerPhone,
        address: this.address,
        fullname: this.fullname,
        openId: this.openId,
        longitude: this.longitude,
        latitude: this.latitude,
      },
    });
  }
}
</script>
<style lang="less" scoped></style>
